<style type="text/css">
    .color-picker {
        position: absolute;
        width: 200px;
        z-index: 1;
        border: 1px solid silver;
        background: #fff;
        margin-top: 6px;
    }

    .color-picker li {
        padding: 8px;
        margin: 4px 3px;
        float: left;
        border: 1px solid #f0f0f0;
        cursor: pointer;
    }

    .color-picker li:hover {
        border: 1px solid #e78f08;
    }

    .color-picker .blue {
        background: blue;
    }

    .color-picker .red {
        background: red;
    }

    .color-picker .green {
        background: green;
    }

    .color-picker .yellow {
        background: yellow;
    }

    .color-picker .white {
        background: white;
    }

    .color-picker .black {
        background: black;
    }

</style>
<form name="submitEditForm" class="form-horizontal" novalidate>
    <div style="height:500px;width:900px;overflow-y:auto;overflow-x:hidden;">
        <div class="form-group mt10 clearfix" style="border-bottom:1px dashed #d9d9d9">
            <div class="col-sm-9">
                <div class="form-group mt10 clearfix">
                    <span class="col-sm-2 control-label">渠道名称</span>

                    <div class="col-sm-10">
                        <input ng-model="data.channel_name" class="input-text" type="text"
                               required maxlength="100" name="channel_name" placeholder="渠道名称，限制在100个字符内"/>
                        <span role="alert"
                              ng-show="(submitEditForm.$submitted || submitEditForm.channel_name.$touched) && submitEditForm.channel_name.$error.required"
                              class="error ng-hide c-red lh30">渠道名称不能为空</span>

                    </div>
                </div>

                <div class="form-group mt10 clearfix">
                    <span class="col-sm-2 control-label">关联对象</span>

                    <div class="col-sm-10">
                        <div class="radio fl" style="margin-right:50px">
                            <input type="radio" id="rbt_channel_public" name="channel_type" checked="checked" value="0"
                                   ng-model="data.channel_type"
                                   ng-disabled="data.model">
                            <label for="rbt_channel_public">公众号</label>
                        </div>
                        <div class="radio fl">
                            <input type="radio" id="rbt_channel_project" name="channel_type" value="1"
                                   ng-model="data.channel_type"
                                   ng-disabled="data.model">
                            <label for="rbt_channel_project">项目</label>
                        </div>
                        <div class="pt10" style="clear: both;">
                            <div class="c-gray" ng-if="data.channel_type==0">当前渠道为公众号级，绑定当前公众号</div>
                            <div ng-if="data.channel_type==1">
                                <div ui-project data="data.projectList"
                                     ng-model="data.type_business_id"
                                     required name="type_business_id"></div>
                            </div>
                            <span role="alert"
                                  ng-show="(submitEditForm.$submitted || submitEditForm.type_business_id.$touched) && submitEditForm.type_business_id.$error.required"
                                  class="error ng-hide c-red lh30">绑定项目不能为空</span>
                        </div>

                    </div>
                </div>
            </div>
            <div class="col-sm-3 text-center">
                <div style="height: 110px;border: 1px dashed #e0e0e0;width: 110px;text-align: center;margin:3px auto;">
                    <img ng-src="{{data.qr_code_img}}" style="width:100%;height:100%;">
                </div>
                <div ui-uploader is-image auto-upload ng-model="data.qr_code_innner_img" style="clear: both;"
                     state="uploader.stateqr"
                     thumbnail="previewqr" name="img_url"
                     on-status-changed="uploadQRImages($data)"
                     extensions="jpg,png" maxfilesize="200kb"
                     upload-btn-text="二维码图片上传"></div>
                <span class="img-state ng-hide" ng-bind="uploader.stateqr"
                      ng-show="uploader.stateqr!='文件上传成功'"></span>
            </div>
        </div>

        <div class="form-group mt10 clearfix">
            <div class="col-sm-3">
                <span>分享页面设置</span>

                <div style="text-align: center;">
                    <img style="width:100%;height:300px;" ng-src="{{data.background_img}}"/>
                    <span style="background: {{ data.button_color }};padding:5px 10px;position: relative;bottom: 50px;border-radius: 20px;">
                        <span style="color:{{ data.font_color }}">{{ data.button_name||'马上注册' }}</span>
                    </span>
                </div>

            </div>
            <div class="col-sm-9">
                <div class="form-group mt10 clearfix">
                    <div class="col-sm-2">
                        <span>按键名称：</span>
                    </div>
                    <div class="col-sm-10">
                        <input ng-model="data.button_name" class="input-text" type="text"
                               required maxlength="8" name="button_name" placeholder="按键名称，限制8个字符内"/>
                        <span role="alert"
                              ng-show="(submitEditForm.$submitted || submitEditForm.button_name.$touched) && submitEditForm.button_name.$error.required"
                              class="error ng-hide c-red lh30">按键名称不能为空</span>
                    </div>
                </div>
                <div class="form-group mt10 clearfix">
                    <div class="col-sm-2">
                        <span>字体颜色：</span>
                    </div>
                    <div class="col-sm-10">
                        <span style="border-bottom: 5px solid {{ data.font_color }};padding: 1px 4px;cursor: pointer;"
                              ng-click="showFontColorPicker=true;showBtnColorPicker=false"
                              class="font-board glyphicon glyphicon-font"
                                ></span>
                        <ul class="color-picker" ng-if="showFontColorPicker==true">
                            <li class="blue" title="蓝色" ng-click="setFontColor('blue')"></li>
                            <li class="red" title="红色" ng-click="setFontColor('red')"></li>
                            <li class="green" title="绿色" ng-click="setFontColor('green')"></li>
                            <li class="yellow selected" title="黄色" ng-click="setFontColor('yellow')"></li>
                            <li class="white" title="白色" ng-click="setFontColor('white')"></li>
                            <li class="black" title="黑色" ng-click="setFontColor('black')"></li>
                        </ul>
                    </div>
                </div>
                <div class="form-group mt10 clearfix">
                    <div class="col-sm-2">
                        <span>按钮颜色：</span>
                    </div>
                    <div class="col-sm-10">
                        <span style="border-bottom: 5px solid {{ data.button_color }};padding: 1px 4px;cursor: pointer;"
                              ng-click="showBtnColorPicker=true;showFontColorPicker=false"
                              class="font-board glyphicon glyphicon-edit"
                                ></span>
                        <ul class="color-picker" ng-if="showBtnColorPicker==true">
                            <li class="blue" title="蓝色" ng-click="setBtnColor('blue')"></li>
                            <li class="red" title="红色" ng-click="setBtnColor('red')"></li>
                            <li class="green" title="绿色" ng-click="setBtnColor('green')"></li>
                            <li class="yellow selected" title="黄色" ng-click="setBtnColor('yellow')"></li>
                            <li class="white" title="白色" ng-click="setBtnColor('white')"></li>
                            <li class="black" title="黑色" ng-click="setBtnColor('black')"></li>
                        </ul>
                    </div>
                </div>
                <div class="form-group mt10 clearfix">
                    <div class="col-sm-2">
                        <span>背景图：</span>
                    </div>
                    <div class="col-sm-10">
                        <div style="height: 110px;border: 1px dashed #e0e0e0;width: 110px;text-align: center;padding-top: 5px;">
                            <img ng-src="{{preview||data.background_img}}" style="width:100%;height:100%;">
                        </div>
                        <span role="alert"
                              ng-show="(submitEditForm.$submitted) && !data.thumbnail"
                              class="error ng-hide c-red lh30">背景图不能为空</span>
                        <div ui-uploader is-image auto-upload ng-model="data.background_img" style="clear: both;"
                             state="uploader.state" required
                             thumbnail="preview" name="img_url"
                             on-status-changed="uploadImages($data)"
                             extensions="jpg,png" maxfilesize="200kb"
                             upload-btn-text="背景图上传"></div>
                        <span class="img-state ng-hide" ng-bind="uploader.state"
                              ng-show="uploader.state!='文件上传成功'"></span>
                    </div>
                </div>
                <div class="form-group mt10 clearfix">
                    <div class="col-sm-2">
                        <span>标题：</span>
                    </div>
                    <div class="col-sm-10">
                        <input ng-model="data.channel_title" class="input-text" type="text"
                               required maxlength="20" name="channel_title" placeholder="标题，限制在20个字符内"/>
                        <span role="alert"
                              ng-show="(submitEditForm.$submitted || submitEditForm.channel_title.$touched) && submitEditForm.channel_title.$error.required"
                              class="error ng-hide c-red lh30">标题不能为空</span>
                    </div>
                </div>
                <div class="form-group mt10 clearfix">
                    <div class="col-sm-2">
                        <span>摘要：</span>
                    </div>
                    <div class="col-sm-10">
                        <textarea class="textarea" ng-model="data.channel_summary"
                                  maxlength="40" name="title" placeholder="摘要，限制在40个字符内"></textarea>
                    </div>
                </div>
                <div class="form-group mt10 clearfix">
                    <div class="col-sm-2">
                        <span>缩略图：</span>
                    </div>
                    <div class="col-sm-10">
                        <div style="height: 110px;border: 1px dashed #e0e0e0;width: 110px;text-align: center;padding-top: 5px;">
                            <img ng-src="{{preview_share||data.thumbnail}}" style="width:100%;height:100%;">
                        </div>
                        <span role="alert"
                              ng-show="(submitEditForm.$submitted) && !data.thumbnail"
                              class="error ng-hide c-red lh30">缩略图不能为空</span>
                        <div ui-uploader is-image auto-upload ng-model="data.thumbnail" style="clear: both;"
                             state="uploader.state2" required
                             thumbnail="preview_share" name="img_url"
                             on-status-changed="uploadImages($data)"
                             extensions="jpg,png" maxfilesize="200kb"
                             upload-btn-text="缩略图上传"></div>

                        <span class="img-state ng-hide" ng-bind="uploader.state2"
                              ng-show="uploader.state2!='文件上传成功'"></span>
                    </div>
                </div>
            </div>
        </div>

    </div>
</form>

